<template>
  <div class="userBox">
    <span class="icon" :style="{
      width: `${size}px`,
      height: `${size}px`,
      lineHeight: `${size}px`,
      fontSize: `${size / 2}px`,
      backgroundColor: sex && ['女 ', 2].includes(sex) ? '#fa80b4' : '#6381ff',
    }">
      {{ name.charAt(0) }}
    </span>
    <span>{{ name }}</span>
  </div>
</template>
<script setup lang="ts">
import { onMounted, getCurrentInstance, onUnmounted } from 'vue';
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    name?: string;
    size?: number;
    sex?: number | string;
  }>(),
  {
    name: '未知',
    size: 28,
  },
);
onMounted(() => { });
onUnmounted(() => { });
</script>
<style scoped lang="scss">
.userBox {
  display: flex;
  align-items: center;
  overflow: hidden;

  >* {
    margin-right: 8px;
  }

  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #{$white};
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba($color: #fff, $alpha: 1) inset;
  }
}
</style>
